<!--字典管理页-->
<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">角色管理</span>
  </div>
  <!-- 字典数据搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="角色名称">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.roleName"
                  @keydown.enter="selectDict"></el-input>
      </el-form-item>
      <el-form-item label="角色编码">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.code"
                  @keydown.enter="selectDict"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="selectDict">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin:20px;">
    <!-- 已绑定权限弹窗 -->
    <el-dialog title="已绑定权限" v-model="bindPermDialogVisible" style="padding:40px;">
      <el-button type="primary" style="margin:10px 0;" @click="showUnbindPermList">添加权限</el-button>
      <el-table :data="bindPermArr">
        <el-table-column prop="permName" label="权限名称" align="center"></el-table-column>
        <el-table-column prop="parentName" label="父级权限" align="center"></el-table-column>
        <el-table-column prop="path" label="权限路径" align="center"></el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="200"
            align="center">
          <template #default="scope">
            <el-button link type="primary" @click="removeBindPerm(scope.row.id)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 添加可绑定权限列表弹窗 -->
    <el-dialog title="可绑定权限列表" v-model="AddBindPermDialogVisible"
               :before-close="handleClose1">
      <el-table :data="unBindPermArr">
        <el-table-column label="编号" type="index" align="center" width="80px"></el-table-column>
        <el-table-column prop="permName" label="权限名称" align="center"></el-table-column>
        <el-table-column prop="parentName" label="父级权限" align="center"></el-table-column>
        <el-table-column prop="path" label="权限路径" align="center"></el-table-column>

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="bindNewPerm(scope.row.id,roleId)">绑定</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <div style="margin:10px 0px 40px 10px;">
      字典列表
      <el-button type="primary" style="float: right;margin-top:-3px;" @click="addDict">新增角色</el-button>
    </div>
    <el-table :data="dictArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="roleName" label="角色名称" align="center"/>
      <el-table-column prop="code" label="角色编码" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="showDictOption(scope.row.id)">{{ scope.row.code }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="角色状态" prop="status" align="center">
        <template #default="scope">
          <el-switch active-value="1"
                     inactive-value="0"
                     @change="changeStatus(scope.row.id,scope.row.status)"
                     v-model="scope.row.status"
                     :disabled="scope.row.level==40"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="loadPerm(scope.row.id)">绑定权限</el-button>
          <el-button link type="primary" size="small" @click="editDict(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteDict(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 保存字典弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-form-item label="角色名称">
        <el-input placeholder="请输入" v-model="saveDictForm.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色编码">
        <el-input placeholder="请输入" v-model="saveDictForm.code"></el-input>
      </el-form-item>
      <el-form-item label="角色状态">
        <el-select placeholder="选择" v-model="saveDictForm.status">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveDict">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
//定义存放搜索框的对象
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
// 已绑定权限弹窗的相关值
const bindPermDialogVisible = ref(false)
// 显示已绑定权限弹窗
const showUnbindPermList = () => {
  AddBindPermDialogVisible.value = true
  axios.get(BASE_URL+'8081' + '/v1/perm/selectUnBindPerm?roleId=' + roleId).then((reponse) => {
    if (reponse.data.code == 2000) {
      unBindPermArr.value = reponse.data.data
    } else {
      ElMessage.error(reponse.data.msg)
    }
  })
}
// 已绑定权限表格的数组
const bindPermArr = ref([])
const searchForm = ref({
  roleName: '',
  code: '',
})
// 删除角色与权限绑定信息
const removeBindPerm = (id) => {
  axios.post(BASE_URL +'8081'+ '/v1/perm/deleteRolePerm/' + roleId + '/' + id).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('删除成功')
      loadPerm(roleId)
    } else {
      ElMessage.error(response.data.msg)
    }
  })
}
// 定义显示已绑定权限的方法
const loadPerm = (id) => {
  bindPermDialogVisible.value = true
  roleId = id
  axios.get(BASE_URL+'8081' + '/v1/perm/select?roleId=' + roleId).then((response) => {
    if (response.data.code == 2000) {
      console.log(response.data.data)

      bindPermArr.value = response.data.data
    } else {
      ElMessage.error(response.data.msg)
    }
  })
}
// 定义查找字典的方法
const selectDict = () => {
  let data = searchForm.value
  axios.post(BASE_URL+'8080' + '/v1/role/select' , data)
      .then((response) => {
        if (response.data.code == 2000) {
          dictArr.value = response.data.data
        } else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 定义重置的方法
const resetSearch = () => {
  searchForm.value = {}
  selectDict()
}
const changeStatus = (roleId, status) => {
  axios.post(BASE_URL+'8080' + '/v1/role/update/status/' + roleId + '/' + status)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('状态修改成功')
        } else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 定义新增字典的方法
const addDict = () => {
// 弹出弹窗
  dialogVisible.value = true
//   标题为新增字典
  dialogTitle.value = '新增角色'
//   清空表单
  saveDictForm.value = {}

}
// 定义存放从后端传回来的数据 用来绑定表格的数组
const dictArr = ref([])
//删除字典的方法
const deleteDict = (id) => {
//出现确认框
  if (confirm("您确认要删除此角色吗吗？")) {
    //   向往后端发送请求
    axios.post(BASE_URL+'8080' + '/v1/role/delete/' + id)
        .then((response) => {
          if (response.data.code == 2000) {
            ElMessage.success('删除成功')
            //   重新加载字典
            selectDict()
          } else {
            ElMessage.error(response.data.msg)
          }
        })
  }

}
// 定义此弹窗的题目
const dialogTitle = ref('')
// 定义弹窗是否出现的响应式变量
const dialogVisible = ref(false)
// 此角色未被绑定权限列表
const AddBindPermDialogVisible = ref(false)
// 此角色未绑定权限列表的数组
const unBindPermArr = ref([])
// 定义全局变量roleId
var roleId;
// 将此权限绑定到此角色
const bindNewPerm = (id, roleid) => {
  roleid = roleId
  axios.post(BASE_URL+'8081' + '/v1/perm/addRolePerm/' + roleid + '/' + id).then((response) => {
    if (response.data.code == 2000) {
    ElMessage.success("绑定成功")
      showUnbindPermList()
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}

// 定义此弹窗关闭之前的方法
const handleClose1 = () => {
  if (confirm("是否关闭弹窗")) {
    AddBindPermDialogVisible.value = false
    loadPerm(roleId)
  }
}
// 定义此弹窗关闭之前的方法
const handleClose = () => {
  if (confirm("是否关闭弹窗")) {
    dialogVisible.value = false
    saveDictForm.value = {}
  }
}
// 定义表单双向绑定收集的数据
const saveDictForm = ref({
  roleName: '',
  code: '',
  status: ''
})
// 定义保存表单的方法
const saveDict = () => {
//   将双向绑定的数据变成qs字符串
  let data = saveDictForm.value
//   向后端发送请求
  axios.post(BASE_URL+'8080' + '/v1/role/save', data)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success("保存成功")
          //   关闭弹窗
          dialogVisible.value = false
          //   重新加载字典
          selectDict()
        } else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 将查询字典放入onMounted生命周期中
onMounted(() => {
  selectDict()
})
// 定义编辑此字典的方法
const editDict = (id) => {
//   修改标题
  dialogTitle.value = '编辑角色'
//   弹窗出现
  dialogVisible.value = true
//   向后端发送请求
 let data = {
    roleName: '',
    code: '',
   id:id
  }
  axios.post(BASE_URL+'8080' + '/v1/role/select',data)
      .then((response) => {
        if (response.data.code == 2000) {
          saveDictForm.value = response.data.data[0]
        } else {
          ElMessage.error(response.data.msg)
        }
      })

}
// 定义展示此行字典编码的方法
const showDictOption = (id) => {
  router.push('/perm?id=' + id);
}

// 定义删除此字
</script>

<style scoped>

</style>